<html>
    <head>
        <title>D3 Test</title>
        <script type="text/javascript" src="../d3/d3.v2.js"></script>
		<style type="text/css">
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
			
			.name {
				text-align: center;
				font-family: sans-serif;
				font-size: 30px;
				color: steelblue;
				padding-top: 20px;
			}
		</style>
		<h1 class="name"><u>Metric Analyzis Report For Project Utilities</u></h1>
    </head>
    <body>
		<div id="viz"></div>
        <script type="text/javascript">
		var mtrCol = ["darkgreen","steelblue","green","blueviolet","red","blue","black","mediumaquamarine"],
			svgWidth = 600,
			svgHeight = 250,
			xScale = d3.scale.linear(),
			padding = 20,
			leftPadding = 220;
			
		
		d3.select("body").append("br"); //get space for it
		

		
		var overviewHolder = d3.select("body")
							   .append("svg")
							   .attr("height", svgHeight)
							   .attr("width", svgWidth);
							   
							   
		//d3.select("body").append("br");

		

			d3.csv("../../log/FolderList.csv", function(folders){
			d3.csv("../../log/"+ (folders[folders.length - 1].FolderNames) +"/projCSVUtilities.csv", function(projectData) {	
				
			
				xScale.domain([0, d3.max(projectData, function(d) { return (d.MetricName == "SUM" ? 0 : +d.Value); })])
					 .range([0, svgWidth - leftPadding -20]);
				
				var rectHolder = overviewHolder.selectAll("rect")
								  .data(projectData)
								  .enter().append("rect")
								  .attr("x", function(d,i){ return leftPadding; })
								  .attr("y", function(d,i) { return (i*20 + padding); })
								  .attr("width", function(d){return d.MetricName == "SUM" ? 0 : xScale(d.Value);})
								  .attr("height", 19)
								  .attr("fill", function(d,i){ return mtrCol[i] });

				var textHolder = overviewHolder.selectAll("text")
								  .data(projectData)
								  .enter().append("text")
								  .attr("x", 0)
								  .attr("y", function(d,i){return i*20 + 33})
								  .attr("width", 100)
								  .attr("height", 20)
								  .attr("fill", function(d,i){return mtrCol[i];})
								  .text(function(d) {  
									try {
										return d.MetricName.split(":")[1];
									} 
									catch (err){
										//return;
									}});
								  
				var title = overviewHolder.append("g")
									.attr("width", svgWidth)
									.append("text")
										.text("Weighted data for project Utilities")
										.attr("width", svgWidth)
										.attr("y", 15)
										.attr("x", leftPadding)				  
										.attr("font-weight", 600)
										.attr("text-decoration","underline");
													

				overviewHolder.append("g")
							.attr("class", "axis")
							.attr("transform", "translate("+leftPadding+"," + (projectData.length*20 + 20) + ")")
							.call(d3.svg.axis()
								.scale(xScale)
								.orient("bottom")
								.ticks(7));
								
				//loading toplistdata
				d3.csv("../../log/"+ (folders[folders.length - 1].FolderNames) +"/metricsTLUtilities.csv", function(topListData) {
					var listOfSvg = [],
								j = 0,
								k = 0,
								i = 0;
	
					while(j < topListData.length)
					{
						if(j == 0)
						{
							listOfSvg[i] = d3.select("body")
										.append("svg")
										.attr("width", 300)
										.attr("height", 250);
							listOfSvg[i].append("text")
										.text("Classes with highest " + topListData[j].Metric)
										.attr("y", 15)
										.attr("font-weight", "bold")
										.attr("text-decoration", "underline")
										.attr("fill","black");
									
							listOfSvg[i].append("text")
										.text(topListData[j].Value + ": " + topListData[j].Class)
										.attr("y", ((k+2))*20 + 5)
										.attr("fill","blue")
										.attr("font-weight",600);
						}
						else if(j < topListData.length && topListData[j].Metric == topListData[j - 1].Metric)
						{
							k++;
							listOfSvg[i].append("text")
										.text(topListData[j].Value + ": " + topListData[j].Class)
										.attr("y", ((k+2))*20 + 5)
										.attr("fill","blue")
										.attr("font-weight",600);
							
						}
						else
						{
							i++;
							listOfSvg[i] = d3.select("body")
									.append("svg")
									.attr("width", 300)
									.attr("height", 250);
							listOfSvg[i].append("text")
									.text("Classes with highest " + topListData[j].Metric)
									.attr("y", 15)
									.attr("font-weight", "bold")
									.attr("text-decoration", "underline")
									.attr("fill","black");
							
							k = 0;		
							listOfSvg[i].append("text")
										.text(topListData[j].Value + ": " + topListData[j].Class)
										.attr("y", ((k+2))*20 + 5)
										.attr("fill","blue")
										.attr("font-weight",600);
						}
						j++
					}
				});				
			});});

		
		
		
		
		
        </script>
    </body>
</html>